<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <GatewayRedisCacheSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" icon="RedoOutlined" @click="refreshCache()" :loading="isLoading">刷新缓存</el-button>
        </div>
        <div>
            <el-table
                :data="apiCacheDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="id" label="路由编码" />
                <el-table-column prop="applicationName" label="微服务" />
                <el-table-column prop="uri" label="路由地址" />
                <el-table-column prop="predicates" label="断言" />
                <el-table-column prop="filters" label="过滤" />
            </el-table>
        </div>
    </div>
</template>

<script setup name="apiCacheManage" lang="ts">
import {createTag} from '@/utils/ywuCommon'
import GatewayRedisCacheSearch from "@/components/apiCache/GatewayRedisCacheSearch.vue";
import {apiRouteRedisCacheInfo, apiRouteRefreshCacheInfo} from "@/request/api";
import {ElNotification} from "element-plus";
import {applicationNacosInfoQuery} from "@/request/service";
import {computed, ref} from "vue";
import {useRoute} from "vue-router";
import {useApiCacheStore} from "@/stores/apiManage/apiCache";

let isLoading = ref(false);

let apiCacheDataList = computed(() => {return useApiCacheStore().apiCacheDataList});
let apiCacheSearchData = computed(() => {return useApiCacheStore().apiCacheSearchData});

// 创建标签
let route = useRoute();
createTag(route);

// 查询缓存信息
apiRouteRedisCacheInfo(apiCacheSearchData.value).then(res => {
    if (res["code"] === '200') {
        useApiCacheStore().resetApiCacheDataList(res.data);
    }
})

function refreshCache() {
    isLoading.value = true;
    // 查询当前选中的微服务的实例个数
    applicationNacosInfoQuery({applicationName: 'YWU-GATEWAY'}).then(res => {
        if (res["code"] === '200') {
            let serviceInstance = res.data
            for (let i = 0; i < serviceInstance.length; i++) {
                apiRouteRefreshCacheInfo().then(res => {
                    if (res["code"] !== '200') {
                        ElNotification({
                            title: 'Error',
                            message: res["message"],
                            type: 'error'
                        })
                    }
                })
            }
            ElNotification({
                title: 'Success',
                message: res["message"],
                type: 'success'
            })
        }
    })
    isLoading.value = false;
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 98%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
        height: 70vh;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}

</style>